<template>
	<view class="page">
		<!-- 名片显示 -->
		<view class="card-box">
			<card-style1 :userInfo="model" v-if="model.style==0"></card-style1>
			<card-style2 :userInfo="model" v-else-if="model.style==1"></card-style2>
			<card-style4 :userInfo="model" v-else-if="model.style==3"></card-style4>
			<card-style5 :userInfo="model" v-else-if="model.style==4"></card-style5>
			<default-card :userInfo="model" bgStyle="2" v-else-if="model.style==5"></default-card>
			<card-style6 :userInfo="model" v-else-if="model.style==6"></card-style6>
			<default-card :userInfo="model" bgStyle="3" v-else-if="model.style==7"></default-card>
			<!-- 默认名片 -->
			<default-card :userInfo="model" v-else></default-card>
		</view>

		<view class="form-box">
			<view class="form-title">修改员工名片</view>
			<u-form :model="model" ref="form" labelWidth="120" labelAlign="left" labelPosition="left">

				<view class="form-wrap">
					<u-form-item label="部门" borderBottom>
						<u-input maxlength="20" v-model="model.department" border="none" :customStyle="inputCustomStyle"
							placeholder='请输入部门'></u-input>
					</u-form-item>
					<u-form-item label="职位" borderBottom>
						<u-input maxlength="10" v-model="model.position" border="none" :customStyle="inputCustomStyle"
							placeholder='请输入职位'></u-input>
					</u-form-item>
				</view>

				<view class="form-wrap">
					<u-form-item label="头像" borderBottom>
						<view class="avatar-box">
							<u-avatar size="96rpx" :src="model.head"></u-avatar>
						</view>
					</u-form-item>
					<u-form-item label="姓名" borderBottom>
						<u-input maxlength="10" v-model="model.name" border="none" :customStyle="inputCustomStyle"
							placeholder='请输入姓名'></u-input>
					</u-form-item>
					<u-form-item label="手机号" borderBottom>
						<u-input maxlength="20" v-model="model.mobile" border="none" :customStyle="inputCustomStyle"
							placeholder='请输入手机号'></u-input>
					</u-form-item>
					<u-form-item label="邮箱" borderBottom>
						<u-input maxlength="20" v-model="model.mail" border="none" :customStyle="inputCustomStyle"
							placeholder='请输入邮箱'></u-input>
					</u-form-item>
					<u-form-item label="权限" borderBottom labelPosition="top" v-if="userInfo.roleIdentify===1">
						<view class="radio-box">
							<u-radio-group v-model="model.roleIdentify" size="40rpx" iconSize="24rpx"
								activeColor="#276AEE">
								<u-radio v-for="(item, index) in roleList" :key="index" :label="item.name"
									:name="item.id" :customStyle="{marginRight: '16rpx'}" labelSize="32rpx">
								</u-radio>
							</u-radio-group>
						</view>
					</u-form-item>
				</view>
			</u-form>

			<view class="submit-box">
				<u-button color="#276AEE" :customStyle="{height:'88rpx'}" throttleTime="500"
					@click="submit">保存修改</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import cardStyle1 from '@/components/cardStyle/cardStyle1.vue'
	import cardStyle2 from '@/components/cardStyle/cardStyle2.vue'
	import cardStyle4 from '@/components/cardStyle/cardStyle4.vue'
	import cardStyle5 from '@/components/cardStyle/cardStyle5.vue'
	import cardStyle6 from '@/components/cardStyle/cardStyle6.vue'
	import defaultCard from '@/components/cardStyle/defaultCard.vue'
	//超级管理员 1 管理员2 普通 0
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import baseConfig from '@/config/baseUrl.js'
	const chooseLocation = requirePlugin('chooseLocation');

	export default {
		components: {
			cardStyle1,
			cardStyle2,
			cardStyle4,
			cardStyle5,
			cardStyle6,
			defaultCard
		},
		data() {
			return {
				inputCustomStyle: {
					padding: '10rpx 0'
				},

				cardId: '',
				openId: '',
				model: {
					position: '',
					name: '',
					mobile: '',
					mail: '',
					address: '',
					head: '',
					sex: null,
					wchat: '',
					code: '', //二维码图片地址
					showSetRolePopup: false,
					roleIdentify: null,
				},
				roleList: [{
						name: '超级管理员',
						id: 1
					},
					{
						name: '管理员',
						id: 2
					},
					{
						name: '普通',
						id: 0
					},
				]
			}
		},
		onLoad(option) {
			this.cardId = option.cardId || ''
			this.openId = option.openId || ''
			this.queryCardInfo()
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			//查询名片信息
			async queryCardInfo() {
				let res = await this.$api.queryCartById({
					id: this.cardId
				})
				if (res.success) {
					console.log('查询名片信息', res.result);
					this.model = res.result
				}
			},
			submit() {
				let payload = {
					...this.model,
					openId: this.openId,
				}
				this.$api.updateCardInfo(payload).then(res => {
					if (res.success) {
						uni.navigateBack()
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}

	.page {
		padding-bottom: calc(206rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(206rpx + env(safe-area-inset-bottom));
	}

	.card-box {
		padding-bottom: 32rpx;
		background-color: #fff;
		overflow: hidden;
	}

	.form-box {
		margin-top: 24rpx;

		.form-title {
			padding: 26rpx 32rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #1D2129;
			line-height: 44rpx;
			background-color: #fff;
		}

		.form-wrap {
			padding: 0 32rpx;
			background-color: #fff;
		}

		.form-wrap+.form-wrap {
			margin-top: 24rpx;
		}

		.avatar-box {
			width: 100%;

			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.radio-box {
			margin-top: 32rpx;
		}

		.submit-box {
			position: fixed;
			left: 0;
			right: 0;
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
			padding: 16rpx 48rpx;
			z-index: 999;
		}

		.avatarImg {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
		}
	}
</style>